<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react的tab切换</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    nav {
        display: flex;
        justify-content: space-between;
        line-height: 60px;
    }

    nav li {
        flex: 1;
        text-align: center;
        background-color: #8ab5da;
        color: greenyellow;
    }

    #div {
        display: none;
    }
</style>

<body>
    <div id="app"></div>
    <script src="./react/react.js"></script>
    <script src="./react//react-dom.js"></script>
    <script src="./react/babel.js"></script>
    <script type="text/babel">
        let arr = ['首页', '热点', '娱乐', '国际', '军事']
        function tab(e) {
            let li = document.querySelectorAll('li')
            let div = document.querySelectorAll('#div')
            li.forEach((item, index) => {
                if (item == e) {
                    item.style.color = 'blue'
                    item.style.background = 'gold'
                    div[index].style.display = 'block'
                } else {
                    item.style.color = 'greenyellow'
                    item.style.background = '#8ab5da'
                    div[index].style.display = 'none'

                }
            })
        }

        ReactDOM.render(
            <div>
                <nav onClick={(e) => { tab(e.target) }}>{arr.map((v, i) => <li key={i}>{v}</li>)}</nav>{arr.map((v, i) => <div id='div' key={i}>{v}</div>)}
            </div>,
            document.getElementById('app')
        )
    </script>
</body>

</html>